@charset "utf-8";
/* Created By Nicky */

@font-face {    
	font-family: jb;    
	src: url( ../font/jb.otf) ; 
	src: url( ../font/jb.otf) format("truetype");   
	font-weight:100;
}

body,p,li,ul,dl,dd,h1,h2,h3,h4{ margin:0px; padding:0px; }
body{ width:100%; height:100%; overflow:hidden; }
li{ list-style:none; }
a{ text-decoration:none; }

#bg{ z-index:-1; }
.pg{ position:absolute; top:0px; left:0px; width:100%; height:100%; }
.w{ width:100%; }
.h{ height:100%; }
.ab{ position:absolute; }
.hd{ display:none; }

#load p{ }
#load_txt{ top:46%; text-align:center; padding-left:5px; color:rgba(255,255,255,0.9); font-family:jb;   }

#sc{ z-index:999; display:none; background-color:rgba(110,20,30,0.9); }
#sc table,#sc table td{ width:100%; height:100%; text-align:center; vertical-align:middle;  }
#sc table td img{ max-width:60%; max-height:60%; }

#logo{ width:40%; left:30%; top:8%; text-align:center; position:absolute; z-index:500; }

@keyframes indexpoint  { 
	0% {  transform:translateY(0px); opacity:0;  -webkit-transform:translateY(0px); } 
	10% {  transform:translateY(-5px); opacity:0;  -webkit-transform:translateY(-5px); } 
	20% {  transform:translateY(-10px); opacity:1;  -webkit-transform:translateY(-10px); } 
	60% {  transform:translateY(-20px); opacity:1;  -webkit-transform:translateY(-20px); } 
	70% {  transform:translateY(-25px); opacity:0;  -webkit-transform:translateY(-25px); } 
	90% {  transform:translateY(-30px); opacity:0; -webkit-transform:translateX(-30px); } 
	100% {  transform:translateY(0px); opacity:0; -webkit-transform:translateX(0px); } }
@-webkit-keyframes indexpoint  { 
	0% {  transform:translateY(0px); opacity:0;  -webkit-transform:translateY(0px); } 
	10% {  transform:translateY(-5px); opacity:0;  -webkit-transform:translateY(-5px); } 
	20% {  transform:translateY(-10px); opacity:1;  -webkit-transform:translateY(-10px); } 
	60% {  transform:translateY(-20px); opacity:1;  -webkit-transform:translateY(-20px); } 
	70% {  transform:translateY(-25px); opacity:0;  -webkit-transform:translateY(-25px); } 
	90% {  transform:translateY(-30px); opacity:0; -webkit-transform:translateX(-30px); } 
	100% {  transform:translateY(0px); opacity:0; -webkit-transform:translateX(0px); } }
	
.indexpoint{ bottom:0px; width:80%; left:10%;  animation:indexpoint 3s linear infinite ; -webkit-animation:indexpoint 3s linear infinite ; }

@keyframes music_btn_move  { 
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); } 
	25% {  transform:rotate(-40deg); -webkit-transform:rotate(-40deg); }  
	75% {  transform:rotate(40deg); -webkit-transform:rotate(40deg); } 
	100%{  transform:rotate(0deg); -webkit-transform:rotate(0deg); }   }
@-webkit-keyframes music_btn_move {
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); } 
	25% {  transform:rotate(-40deg); -webkit-transform:rotate(-40deg); }  
	75% {  transform:rotate(40deg); -webkit-transform:rotate(40deg); } 
	100%{  transform:rotate(0deg); -webkit-transform:rotate(0deg); }   }
.music_btn_on{ animation:music_btn_move 3s linear infinite ; -webkit-animation:music_btn_move 3s linear infinite ; }
.music_btn{ z-index:500; position:absolute; display:none; width:30px; top:20px; right:10px; }

#framebox{ display:none; top:-5%; height:110%;  }

@keyframes carbgBg{ 
	0% { width:100%; height:100%; top:0; left:0; }  
	5% { width:140%; height:140%; top:-20%; left:-20%; } 
	100%{ width:140%; height:140%; top:-20%; left:-20%; }  }
@-webkit-keyframes carbgBg{ 
	0% { width:100%; height:100%; top:0; left:0; }  
	5% { width:140%; height:140%; top:-20%; left:-20%; }  
	100%{ width:140%; height:140%; top:-20%; left:-20%; }  }
.carbgBg{ animation:carbgBg 50s linear infinite ; -webkit-animation:carbgBg 50s linear infinite ; }
.carbgBgEnd{ width:140%; height:140%; top:-20%; left:-20%; }


#recordbtn{ position:absolute; display:none; background:url(../img/start_btn_ico.png) center no-repeat; background-size:100% 100%; z-index:10; }
#recordviewbtn{ position:absolute; display:none; background:url(../img/start_btn_ico_2.png) center no-repeat; background-size:100% 100%; z-index:10; }
#recordbtnsc,#recordbtnsc2,#recordbtnbg{ position:absolute; z-index:9;  display:none; }
#recordbtnsc{ transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); background:url(../img/start_btn_sc.png) center no-repeat; background-size:100% 100%;  }
#recordbtnsc2{ transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); background:url(../img/start_btn_sc2.png) center no-repeat; background-size:100% 100%;  }

#recordbtnbg{ transform:scale(1.2,1.2); -webkit-transform:scale(1.2,1.2); background:url(../img/start_btn_bg.png) center no-repeat; background-size:100% 100%;  } 

@keyframes recordbtnsc_img  { 
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:rotate(360deg); }  }
@-webkit-keyframes recordbtnsc_img {
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:rotate(360deg); }  }
#recordbtnsc{ display:none; }
.recordbtnsc{  animation:recordbtnsc_img 3s linear infinite ; -webkit-animation:recordbtnsc_img 3s linear infinite ;  }

@keyframes recordbtnsc_img2  { 
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:rotate(360deg); }  }
@-webkit-keyframes recordbtnsc_img2 {
	0% {  transform:rotate(0deg); -webkit-transform:rotate(0deg); }  
	100%{  transform:rotate(360deg); -webkit-transform:rotate(360deg); }  }
#recordbtnsc2{ display:none; }
.recordbtnsc2{  animation:recordbtnsc_img2 3s linear infinite ; -webkit-animation:recordbtnsc_img2 3s linear infinite ;  }

@keyframes recordbtnbg_img  { 
	5% {  transform:scale(1,1);   opacity:0; -webkit-transform:transform:scale(1,1); } 
	5% {  transform:scale(1,1);   opacity:1; -webkit-transform:transform:scale(1,1); }  
	70%{  transform:scale(1.3,1.3);  opacity:1; -webkit-transform:transform:scale(1.3,1.3); } 
	100%{  transform:scale(1.5,1.5);  opacity:0; -webkit-transform:transform:scale(1.5,1.5); }  }
@-webkit-keyframes recordbtnbg_img {
	5% {  transform:scale(1,1);   opacity:0; -webkit-transform:scale(1,1); }  
	5% {  transform:scale(1,1);   opacity:1; -webkit-transform:scale(1,1); }  
	70%{  transform:scale(1.3,1.3);  opacity:1; -webkit-transform:scale(1.3,1.3); } 
	100%{  transform:scale(1.5,1.5);  opacity:0; -webkit-transform:scale(1.5,1.5); }  } 
#recordbtnbg{ animation:recordbtnbg_img 2s linear infinite ; -webkit-animation:recordbtnbg_img 2s linear infinite ; }

#bottom_btn{ display:none; position:absolute; bottom:5%; width:100%; text-align:center; left:0px; }
#resetbtn{  }
#resetbtn img{ width:25%; }
#savebtn{  margin:20px auto; }
#savebtn img{ width:50%; } 

#sharediv{ position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:60; display:none; background-color:rgba(0,0,0,0.8); }
#sharediv img{ width:100%; }

.frameboxmohu {
	filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */    
    -webkit-filter: blur(2px); /* Chrome, Opera */
	-moz-filter: blur(2px);
	-ms-filter: blur(2px);    
    filter: blur(2px);
}

#cardbg{ display:none; }
#cardbtn{ position:absolute; bottom:5%; width:100%; left:0px; display:none; }
#cardbtn div{ text-align:center; }
#cardbtn div .cardshareTxt{ width:30%; }
#cardbtn div #cardshareBtn{ width:40%; margin:10px 0px; }
#cardbtn div #cardshareBtn2{ width:40%; margin:10px 0px; display:none; }

#touchtxt{ position:absolute; display:none; width:40%; left:30%; top:70%; }
#touchtxt img{ position:absolute; display:none; width:100%; top:0px; left:0px; }